zksy-website-front/src/app/products/[id]/page.tsx

import React from 'react';
import {Breadcrumb} from "antd";
import {serverGet} from "@/utils/request";
import './rich.css'
import MainTitle from "@/components/MainTitle";
import ContentNotFound from "@/components/ContentNotFound";
import './head.css';
import Image from "next/image"; // 引入样式文件
export const dynamicParams = true
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL as string
export const generateStaticParams = async () => {
    const res = await serverGet<Page<ProductCenter>, { pageNum: number; pageSize: number }>(
        "/webSite/getProductByPage",
        {pageNum: 1, pageSize: 20}, {
            next: {
                revalidate: 1800
            },
            cache: "force-cache"
        }
    )
    return res.data.records.map((item) => ({
        id: item.id,
    }))
}

async function Page({
                        params,
                    }: {
    params: Promise<{ id: string }>
}) {
    const {id} = await params;
    const res = await serverGet<ProductCenter, { id: string }>(
        "/webSite/getProductById",
        {id}, {
            next: {
                revalidate: 1800
            },
            cache: "force-cache"
        }
    )
    if (!res.data) {
        return <ContentNotFound/>
    }
    console.log(111,res.data)
    return (
        <>
            <div className="w-4/5 mx-auto">
                <div className="pt-5 sm:pt-10 sm:ml-20 flex gap-2">
                    <span className="text-sm">您当前的所在位置:</span>
                    <Breadcrumb
                        separator=">"
                        items={[
                            {title: "产品列表", href: "/products"},
                            {title: res.data.productName || "产品详情"},
                        ]}
                    />
                </div>
            </div>
            <div className="py-6 sm:py-10">
                <MainTitle title={"产品详情"} titleLetter={"PRODUCT_DETAIL"}/>
            </div>
            {/*头部区域*/}
            <div className='container'>
                {/* 左侧图片区域 */}
                <div className='leftSection'>
                    {/*<img*/}
                    {/*    src={res.data.productUrl ? BASE_URL + res.data.productUrl : "/assets/home/20.png"} // 替换为实际设备图片链接*/}
                    {/*    alt="雷达水位监测仪EN200-D"*/}
                    {/*    className='deviceImg'*/}
                    {/*/>*/}
                    <Image
                        className={"h-50 object-contain"}
                        src={res.data.productUrl ? BASE_URL + res.data.productUrl : "/assets/home/20.png"}
                        alt={res.data.productName}
                        width={1000}
                        height={1000}
                    />
                </div>

                {/* 右侧信息区域 */}
                <div className='rightSection'>
                    <h3 className='productName'>{res.data.productName}</h3>
                    <p className='model'>{res.data.productModel}</p>
                    <ul className='featureList'>
                        {res.data.productIntroduction?.split('·').map((item, index) => (
                            <li key={index}>{item.trim()}</li>
                        ))}
                    </ul>

                    <div className='specs'>
                        <p><span className='label'>型号：</span>{res.data.productModel}</p>
                        <p><span className='label'>品牌：</span>中科盛阳</p>
                        <p><span className='label'>场景：</span>{res.data.productScene}</p>
                    </div>

                    {/* 按钮区域 */}
                    <div className='buttonGroup'>
                        <a
                            href="tel:0731-8531-5153"
                            className='contactBtn'
                        >
                            <span className='phoneIcon'>📞</span> 0731-8531-5153
                        </a>
                        <button className='quoteBtn'>获取报价</button>
                    </div>
                </div>
            </div>
            <div className="ql-editor w-9/10 sm:w-7/10 mx-auto sm:px-20 sm:py-10">
                <div className="text-2xl font-bold mb-4 border-b-2 border-blue-600 ql-color-blue">详细信息</div>
            </div>

            <div
                dangerouslySetInnerHTML={{__html: res.data.productDetails as string}}
                className="ql-editor w-9/10 sm:w-7/10 mx-auto sm:px-20 sm:py-10"
            />
        </>
    );
}


export default Page;